<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
    <script src="popper.min.js"></script>
    <script src="bootstrap.min.js"></script>
    <title>代码自动生成</title>
</head>
<body>
<div class="container mt-3">
    <form class="form-inline">
        <div class="form-group mx-sm-1 mb-2">
            <input type="text" class="form-control form-control-sm" id="host" placeholder="host">
        </div>
        <div class="form-group mx-sm-1 mb-2">
            <input type="text" class="form-control form-control-sm" id="port" placeholder="port">
        </div>
        <div class="form-group mx-sm-1 mb-2">
            <input type="text" class="form-control form-control-sm" id="username" placeholder="username">
        </div>
        <div class="form-group mx-sm-1 mb-2">
            <input type="text" class="form-control form-control-sm" id="password" placeholder="password">
        </div>
        <div class="form-group mx-sm-1 mb-2">
            <input type="text" class="form-control form-control-sm" id="schema" placeholder="schema">
        </div>
        <span class="btn btn-secondary mb-2 btn-sm mx-sm-1" onclick="testConnect()">测试连接</span>
        <span class="btn btn-primary mb-2 btn-sm mx-sm-1" onclick="fetchTables()">列出表</span>
    </form>
</div>
<div class="container">
    <table class="table table-striped table-hover table-sm">
        <thead>
        <tr>
            <th scope="col">名称</th>
            <th scope="col">类型</th>
            <th scope="col">注释</th>
            <th scope="col">主键</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody id="tables">
        </tbody>
    </table>
</div>
<div class="modal" tabindex="-1" role="dialog" id="fieldsDialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="table table-striped table-hover table-sm">
                    <thead>
                    <tr>
                        <th scope="col">名称</th>
                        <th scope="col">类型</th>
                        <th scope="col">长度</th>
                        <th scope="col">是否可空</th>
                        <th scope="col">注释</th>
                        <th scope="col">默认值</th>
                        <th scope="col">关联字段</th>
                        <th scope="col">关联字段类型</th>
                        <th scope="col">自增策略</th>
                    </tr>
                    </thead>
                    <tbody id="fields">
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" tabindex="-1" role="dialog" id="codeParamsDialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <input type="hidden" class="form-control" id="tableName">
                        <input type="text" class="form-control" id="name" placeholder="实体类名">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="packageName" placeholder="包名">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="appName" placeholder="服务名">
                    </div>
                    <div class="form-group">
                        <input type="text" class="form-control" id="author" placeholder="作者">
                    </div>
                    <div class="form-group">
                        <textarea class="form-control" id="description" placeholder="注释"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="generateCode()">生成</button>
            </div>
        </div>
    </div>
</div>
<script>
    function getConnectionParams() {
        return {
            "host": $('#host').val(),
            "port": $('#port').val(),
            "username": $('#username').val(),
            "password": $('#password').val(),
            "schema": $('#schema').val()
        }
    }

    function testConnect() {
        $.post('database', getConnectionParams(), function (data) {
            alert(data);
        })
    }

    function fetchTables() {
        $.post('table', getConnectionParams(), function (data) {
            $('#tables').empty();
            for (var i in data) {
                var d = data[i];
                $('#tables').append('<tr>' +
                    '<th scope="row"><span class="btn btn-link btn-sm" onclick="fetchTable(\'' + d.name + '\')">' + d.name + '</span></th>' +
                    '<td>' + d.type + '</td>' +
                    '<td>' + d.remark + '</td>' +
                    '<td>' + d.primary + '</td>' +
                    '<td><span class="btn btn-primary btn-sm" onclick="codeParamsDialog(\'' + d.name + '\')">生成代码</span></td>' +
                    '</tr>');
            }
        })
    }

    function fetchTable(tableName) {
        $.post('table/' + tableName, getConnectionParams(), function (data) {
            $('#fieldsDialog .modal-title').html(tableName);
            $('#fields').empty();
            for (var i in data) {
                var d = data[i];
                $('#fields').append('<tr>' +
                    '<th scope="row">' + d.name + '</th>' +
                    '<td>' + d.typeName + '</td>' +
                    '<td>' + d.size + '</td>' +
                    '<td>' + d.nullable + '</td>' +
                    '<td>' + d.remark + '</td>' +
                    '<td>' + d.defaultValue + '</td>' +
                    '<td>' + (d.refTable ? (d.refTable + '.' + refField) : '') + '</td>' +
                    '<td>' + (d.refTable ? d.refTypeName : '') + '</td>' +
                    '<td>' + d.autoIncrement + '</td>' +
                    '</tr>');
            }
            $('#fieldsDialog').modal('show');
        })
    }

    function codeParamsDialog(tableName) {
        $('#codeParamsDialog .modal-title').html(tableName);
        $('#codeParamsDialog').modal('show');
        $('#tableName').val(tableName);
        $('#name').val('');
        $('#packageName').val('');
        $('#author').val('');
        $('#description').val('');
    }

    function generateCode() {
        var data = {
            "tableName": $('#tableName').val(),
            "name": $('#name').val(),
            "packageName": $('#packageName').val(),
            "appName": $('#appName').val(),
            "author": $('#author').val(),
            "description": $('#description').val(),
            "database.host": $('#host').val(),
            "database.port": $('#port').val(),
            "database.username": $('#username').val(),
            "database.password": $('#password').val(),
            "database.schema": $('#schema').val()
        };
        var form = $('<form></form>');
        form.attr('action', "code?rand=" + Math.random());
        form.attr('method', 'post');
        form.attr('target', '_blank');
        for (var i in data) {
            var item = data[i];
            var input = $('<input type="text" />');
            input.attr('name', i);
            input.attr('value', item);
            form.append(input);
        }
        form.appendTo('body').submit().remove();
    }
</script>
</body>
</html>